<template>
	<div class="footer-container">
		<div class="fri-link">
			<div class="footeritem link">
				<p>友情连接</p>
				<div class="linkdiv">
					<ul ref="linkUl" class="linkUl">
						<li v-for="(item, index) in linkArr" :key="index">
							<a :href="item.url" target='_blank'>{{ item.name }}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="footeritem contact">
				<div>
					<p>联系电话</p>
					<span>{{ contactMes.name }}</span>&nbsp;<span>{{ contactMes.phone }}</span>
					<br/>
					<span>客&nbsp;&nbsp;&nbsp;&nbsp;服</span>&nbsp;<span>13220179503</span>
				</div>
				<div>
					<p>联系邮箱</p>
					<span>{{ contactMes.email }}</span>
				</div>
				<div>
					<p>联系地址</p>
					<span>{{ contactMes.addr }}</span>
				</div>
			</div>
			<div class="footeritem map">
				<div id="amap"></div>
			</div>
		</div>

		<div class="footer">技术支持：北京哲努斯科技有限公司&nbsp;备案号：京ICP备2022023943号-1</div>
	</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
// import { AMapManager } from 'vue-amap';
export default {
	data() {
		return {
			linkArr: ['新华社出版社', '北京互联网违法和不良信息举报中心', '中国互联网举报中心网络110报警服务', '北京创新乐知网络技术有限公司', '北京创新乐知网络技术有限公司'],
			contactMes: {
				name: '项老师',
				email: 'qiyechuban@lanshizi.com',
				phone: '15858561324',
				addr: '北京中文出版集团北京图书报刊有限公司'
			},
			area: null,
			speed: 100,
			delay: 2000,
			height: 30,
			time: null,
		}
	},
	mounted() {
		this.getContact();
		this.getUser();
		this.getLinks();
		this.initMap();
		this.scrollLinks();
		// this.start();

	},
	componentWillUnmount() { //卸载时清除定时器
		clearInterval(this.time)
	},
	methods: {
		initMap() {
			let that = this;
			AMapLoader.load({
				key: "e5113fd590247e762bcc901197efe7ee", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("amap", { //设置地图容器id
					viewMode: "3D", //是否为3D地图模式
					zoom: 13, //初始化地图级别
					center: [116.1231, 39.73244], //初始化地图中心点位置
				});

				// this.addMarker();

				//添加弹窗
				let content = [];
				content.push("北京市房山区月华南大街19号院2号楼5至6层558");
				let infoWindow = new AMap.InfoWindow({
					isCustom: true, //使用自定义窗体
					content: that.createInfoWindow(content.join("<br/>")),
					offset: new AMap.Pixel(16, -45)
				});
				infoWindow.open(this.map, [116.1231, 39.73244]);



			}).catch(e => {
				console.log(e);
			})
		},
		//添加marker标记
		addMarker() {
			this.map.clearMap();
			let marker = new AMap.Marker({
				map: this.map,
				position: [116.1231, 39.73244]
			});
			//鼠标点击marker弹出自定义的信息窗体
			marker.on('click', function () {
				// infoWindow.open(map, marker.getPosition());
			});
		},
		//构建自定义信息窗体
		createInfoWindow(content) {

			let info = document.createElement("div");
			info.className = "custom-info input-card content-window-card";

			//可以通过下面的方式修改自定义窗体的宽高
			// info.style.width = "300px";


			// 定义中部内容
			var middle = document.createElement("div");
			middle.className = "info-middle";
			middle.style.backgroundColor = 'rgb(36, 121, 125)';
			middle.style.fontSize = '12px';
			// middle.style.color = 'black';
			middle.style.padding = '10px';
			middle.style.whiteSpace = 'nowrap';
			middle.innerHTML = content;
			info.appendChild(middle);

			// 定义底部内容
			let bottom = document.createElement("div");
			bottom.className = "info-bottom";
			bottom.style.position = 'relative';
			bottom.style.top = '0px';
			bottom.style.margin = '0 auto';
			bottom.style.textAlign = 'center';
			let sharp = document.createElement("img");
			sharp.src = "https://webapi.amap.com/images/sharp.png";
			bottom.appendChild(sharp);
			info.appendChild(bottom);

			return info;
		},
		//友情链接请求
		getLinks() {
			this.$http.get(`/bookManagement/link/page?order=&orderField=&page=1&limit=10`).then(res => {
				// console.log(res);
				if (res.data.code === 0) {
					this.linkArr = res.data.data.list;
				}
			}).catch(e => {
				console.log(e);
			});
		},
		scrollLinks() {
			setTimeout(this.start, this.delay);
		},
		start() {
			this.area = this.$refs.linkUl;
			this.area.innerHTML += this.area.innerHTML;
			this.area.innerHTML += this.area.innerHTML;

			// this.time = setInterval(() => {
			// 	this.area.scrollTop++;
			// 	if (this.area.scrollTop >= this.area.scrollHeight / 2) {
			// 		this.area.scrollTop = 0;
			// 		// console.log(this.area.scrollTop);
			// 		console.log("归零");
			// 	}
			// 	console.log(this.area.scrollHeight);
			// 	console.log(this.area.scrollTop);
			// }, this.speed);
			// this.area.scrollTop++;
		},
		getContact() {
			this.$http.get(
				'/bookManagement/company/page?order=&orderField=&page=1&limit=3'
			).then(res => {
				// console.log(res);
				this.contactMes.addr = res.data.data.list[0].address;
			}).catch();
		},
		getUser() {
			this.$http.get(
				'/bookManagement/usertable/page?order=&orderField=&page=1&limit=3'
			).then(res => {
				// console.log(res);
				let obj = res.data.data.list[0];
				this.contactMes.name = obj.name;
				this.contactMes.email = obj.email;
				this.contactMes.phone = obj.phone;
				localStorage.setItem('name', obj.name);
				localStorage.setItem('phone', obj.phone);
			}).catch();
		}
	}

}
</script>

<style scoped>
.footer-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #063f5a;
	color: white;
	text-align: left;
}

p {
	margin: 0;
	padding: 0;
	font-size: 30px;
	line-height: 44px;
}



ul {
	padding: 0;
	margin: 0;
	overflow: hidden;

}

/* 友情连接 */


@-webkit-keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, -307px, 0);
		transform: translate3d(0, -307px, 0);
	}
}

@keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, -307px, 0);
		transform: translate3d(0, -307px, 0);
	}
}

.fri-link {
	flex: 1;
	display: flex;
	flex-direction: row;
	padding-top: 30px;
	padding-bottom: 30px;
}

.fri-link .footeritem {
	flex: 1;
	/* min-height: 225px; */

}

.fri-link .link {
	margin-left: 240px;
	display: flex;
	flex-direction: column;
	position: relative;
	/* height: 300px; */
	overflow: hidden;
}

.linkdiv{
	overflow: hidden;
	margin-top: 30px;
	height: 400px;
}


.linkdiv .linkUl {
	-webkit-animation: 10s rowup linear infinite normal;
	animation: 10s rowup linear infinite normal;
	position: relative;
}

.link li {
	height: 15px;
	list-style: none;
	/* line-height: 30px; */
	margin-top: 30px;
}

a {
	font-size: 20px;
	line-height: 30px;
	text-decoration: none;
	color: white;
}

/* 联系人 */
.contact {
	/* line-height: 60px; */
}

.contact>div {
	text-align: left;
}

.contact>div:nth-child(2),
.contact>div:nth-child(3) {
	margin-top: 30px;
}

.contact span {
	font-size: 25px;
	display: inline-block;
	margin-top: 25px;
}

/* 地图 */
.map {
	margin-right: 150px;
	margin-left: 10px;
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#amap {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 350px;
}

.footer {
	/* height: 50px; */
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid white;
	font-size: 18px;
	/* line-height: 27px; */
}
</style>

<style>
.content-window-card {
	position: relative;
	box-shadow: none;
	bottom: 0;
	left: 0;
	width: auto;
	padding: 0;
}

.content-window-card p {
	height: 2rem;
}

.custom-info {
	border: solid 1px silver;
}

div.info-top {
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius: 5px 5px 0 0;
}

div.info-top div {
	display: inline-block;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 31px;
	padding: 0 10px;
}

div.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
}

div.info-top img:hover {
	box-shadow: 0px 0px 5px #000;
}

div.info-middle {
	font-size: 12px;
	padding: 10px 6px;
	line-height: 20px;
}

div.info-bottom {
	height: 0px;
	width: 100%;
	clear: both;
	text-align: center;
}

div.info-bottom img {
	position: relative;
	z-index: 104;
}

span {
	margin-left: 5px;
	font-size: 11px;
}

.info-middle img {
	float: left;
	margin-right: 6px;
}
</style>
